import styles from "./index.module.less";
import { Button, Space, Modal } from "antd";
import { useRef, useState, useEffect } from "react";
import SuperTable from "@/components/SuperTable";
import { getTableColumns } from "./constant";
import { cloneDeep, omit } from "lodash";
import { getDictList } from "@/api/modules/system";
import { PlusOutlined } from '@ant-design/icons';

interface Props {
    parentRow: object | null;
    onEdit: (row?: any, parentId?: any) => void;
    onDelete: (row: any, callBack?: any) => void;
    onCloseChild: () => void;
}


export default (props: Props) => {
    const { parentRow, onEdit, onDelete, onCloseChild } = props;
	const [params, setParams] = useState({});
    const dataTableRef = useRef(null);

    useEffect(() => {
        setParams({
            page: {
                pageSize: 10,
                pageNum: 1
            },
            parentId: parentRow?.id,
        })
    }, [])

    const handleRequest = async (params: any, sortInfo: any) => {
        const paramsCopy = cloneDeep(params);
        const newParams = omit(paramsCopy, ['pageSize', 'current'])
        const requestData: any = {
            page: {
                pageSize: params.pageSize,
                pageNum: params.current
            },
            ...newParams
        };

        const res = await getDictList(requestData);
        return {
            total: res?.data?.total ?? 0,
            data: res?.data?.list ?? []
        };
    };

    const handleCreate = () => {
        onCloseChild()
    }
    
    const handleCloseModal = () => {
        onCloseChild()
    }
    
	const edit = {
			label: "编辑",
			value: "edit"
		},
		deleteEnum = {
			label: "删除",
			value: "delete"
		};

    const newColumns = [
        ...getTableColumns({ params }),
        {
            title: "操作",
            width: 150,
            fixed: "right",
            dataIndex: "action-render",
            onClick: (key: string, record: any) => {
                switch (key) {
                    case "edit":
                        handleCloseModal();
                        onEdit(record, parentRow?.id);
                        break;
                    case "delete":
                        onDelete(record, () => {
                            dataTableRef?.current?.reload();
                        });
                        break;
                }
            },
            options: (record: any) => {
                return [edit, deleteEnum];
            }
        }
    ];

    const handleShowCreateModel = () => {
        handleCloseModal();
        onEdit(null, parentRow?.id);
    }

    return (
        <Modal
			title={`${parentRow?.name}-字典内容`}
			open={true}
			onOk={handleCreate}
			onCancel={handleCloseModal}
			okText="确定"
			cancelText="关闭"
			centered
            width={800}
		>
            <div className={styles.operation_group}>
                <Button icon={<PlusOutlined /> } type="primary" onClick={handleShowCreateModel}>新增</Button>
            </div>
            <SuperTable
                params={{
                    ...params,
                }}
                ref={dataTableRef}
                // bordered
                rowKey="id"
                columns={newColumns}
                request={handleRequest}
                scroll={{ x: "900" }}
            />
		</Modal>
    )
};